<template>
  <a-modal
      title="修改密码"
      :visible="visible"
      :confirmLoading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      okText="保存"
      cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="dataForm" :model="dataForm" :rules="validatorRules">
        <a-form-model-item label="账号" :labelCol="labelCol" :wrapperCol="wrapperCol">
<!--          <span>{{ username() }}</span>-->
          <span>{{ dataForm.username }}</span>
        </a-form-model-item>
        <a-form-model-item v-if="dataForm.username === $store.getters.username" label="原密码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="password">
          <a-input v-model="dataForm.password" type="password" placeholder="原密码"></a-input>
        </a-form-model-item>
        <a-form-model-item label="新密码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="newPassword">
          <a-input v-model="dataForm.newPassword" type="password" placeholder="新密码"></a-input>
        </a-form-model-item>
        <a-form-model-item label="确认密码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="confirmPassword">
          <a-input v-model="dataForm.confirmPassword" type="password" placeholder="确认密码"></a-input>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import { mapGetters } from 'vuex'
import { isPassword } from '@/utils/validate'
import { changePassword } from '@/api/api'
import store from '@/store'

export default {
  data () {
    return {
      visible: false,
      confirmLoading: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      dataForm: {
        username: store.getters.username,
        password: '',
        newPassword: '',
        confirmPassword: ''
      }
    }
  },
  computed: {
    validatorRules () {
      var validatePassword = (rule, value, callback) => {
        if (value && !isPassword(value)) {
          return callback(new Error('密码格式错误!(必须包含数字,大写字母,小写字母,特殊符号,至少其中三项，长度在8-30之间)'))
        }
        callback()
      }
      var validateConfirmPassword = (rule, value, callback) => {
        if (this.dataForm.newPassword !== value) {
          return callback(new Error('确认密码与新密码输入不一致!'))
        }
        callback()
      }
      return {
        password: [
          { required: this.dataForm.username === store.getters.username, message: '原密码不能为空!', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '新密码不能为空!', trigger: 'blur' },
          { validator: validatePassword, trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '确认密码不能为空!', trigger: 'blur' },
          { validator: validateConfirmPassword, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    ...mapGetters(["username"]),
    init () {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
      })
    },
    handleOk () {
      const that = this;
      // 触发表单验证
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          that.confirmLoading = true;
          changePassword(that.dataForm).then((res) => {
            if (res.success) {
              that.$message.success({
                content: res.message,
                duration: 1,
                onClose: () => {
                  that.handleCancel();
                }
              })
            } else {
              that.$message.error(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
          })
        }
      })
    },
    handleCancel () {
      this.visible = false;
    },
  }
}
</script>
